<template>
    <section>
        <!-- 工具条 -->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; margin-top: 20px">
            <el-form :inline="true" :model="filters" :rules="searchRules">
                <el-form-item label="名称">
                    <el-input v-model="filters.name" placeholder="分类名称"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                        <el-slider v-model="filters.sort" range style="width: 200px;"></el-slider>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="showAddDialog = true">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!-- 列表 -->
        <el-table :data="categories" v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="名称" width="400"></el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
        </el-table>

        <!-- 工具条 -->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float: right"></el-pagination>
        </el-col>

        <!-- 新增弹框 -->
        <el-dialog title="新增" :visible.sync="showAddDialog">
            <el-form ref="addForm" :model="addForm" label-width="80px" :label-position="labelPosition" :rules="addRules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-slider v-model="addForm.sort" show-input prop="sort"></el-slider>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add()" :disabled="this.addForm.name.trim() === ''">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </section>
</template>

<script>
    import { queryCategory, addCategrory, deleteBatchCategory } from '../../api/api';
    import util from "../../common/util"

    export default {
        data() {
            return {
                filters: {
                    name: '',
                    sort: [0, 100]
                },
                searchRules: {
                    sort: [
                        { type: 'number', message: '请输入1-100之间的整数', trigger: 'blur' }
                    ]
                },

                sels: [],
                listLoading: false,
                categories: [],
                pageNum: 1,
                total: 1,

                showAddDialog: false,
                labelPosition: 'left',
                addForm: {
                    sort: 0,
                    name: ''
                },
                addRules: {
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'blur' }
                    ],
                    sort: [
                        { type: 'number', message: '请输入1-100之间的整数', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            // 添加分类
            add() {
                //TODO
                console.log(this.addForm.name)
                console.log(this.addForm.sort)

                let params = {
                    name: this.addForm.name,
                    sort: this.addForm.sort
                }
                addCategrory(params).then((res) => {
                    util.sendMessage(res, this)
                    this.getCategories()
                })
            },
            //搜索
            onSearch() {
                this.pageNum = 1
                this.getCategories()
            },
            //获取数据列表
            getCategories() {
                let params = {
                    pageNum: this.pageNum,
                    name: this.filters.name,
                    rangeMin: this.filters.sort[0],
                    rangeMax: this.filters.sort[1],
                    pageSize: 10
                }

                this.listLoading = true;
                queryCategory(params).then((res) => {
                    this.total = res.data.total;
                    this.categories = res.data.data;
                    this.listLoading = false;
                })
            },
            //选择变更
            selsChange: function(sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function() {
                debugger
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let params = { ids: ids };
                    deleteBatchCategory(params).then((res) => {
                        util.sendMessage(res, this)
                        this.showAddDialog = false
                        this.getCategories()
                    });
                    // TODO
                }).catch(() => {

                });
            },
            //页码改变时
            handleCurrentChange(val) {
                debugger
                this.pageNum = val;
                this.getCategories();
            }
        },
        mounted() {
            this.getCategories();
        }
    }
</script>

<style scoped>

</style>
